<template>
  <el-button type="text"
             v-if="isCurrent"
             style="font-size: 12px; margin-left: -20px"
             @click="update">修改</el-button>
  <div class="infoDiv">
    <el-form :model="showInfo">
      <el-form-item label="职位: "
                    class="el-form-item"
                    v-if="isShow || showInfo.position !== null">
        <div v-if="isShow">
          <el-input v-model="showInfo.position"
                    size="small"
                    style="width: 60%;"></el-input>
        </div>
        <span v-else>{{showInfo.position}}</span>
      </el-form-item>
      <el-form-item label="邮箱: "
                    class="el-form-item"
                    v-if="isShow || showInfo.email !== null">
        <div v-if="isShow">
          <el-input v-model="showInfo.email"
                    size="small"
                    style="width: 60%;"></el-input>
        </div>
        <div v-else>{{showInfo.email}}</div>
      </el-form-item>
      <el-form-item label="联系电话: "
                    class="el-form-item"
                    v-if="isShow || showInfo.phone !== null">
        <div v-if="isShow">
          <el-input v-model="showInfo.phone"
                    size="small"
                    style="width: 60%;"></el-input>
        </div>
        <div v-else>{{showInfo.phone}}</div>
      </el-form-item>

    </el-form>
  </div>
  <div id="editor" style="padding-top: 15px; min-height: 100px">
    <div ref="editorElem" style="text-align: left"></div>
<!--    <div v-if="info.email === null-->
<!--      && info.position === null-->
<!--      && info.phone===null-->
<!--      && info.information === null && !isShow"-->
<!--         style="text-align: center; color: #8c939d">-->
<!--      <h2>暂无数据</h2>-->
<!--    </div>-->
<!--    <div v-show="isShow" ref="editorElem" style="text-align: left"></div>-->
  </div>
  <div v-if="isCurrent" style="text-align: right">
    <el-button type="info" size="medium" plain
               v-if="isShow"
               style="margin: 10px 10px 5px 0; float: bottom"
               @click="cancel">取消</el-button>
    <el-button type="primary" size="medium"
               v-if="isShow"
               style="margin: 10px 10px 5px 0; float: bottom"
               @click="updateInfo">提交</el-button>
  </div>
</template>

<script>
import E from "wangeditor";
import axios from 'axios';
import qs from "qs";
export default {
  name: "wangEditor",
  props: {
    authorId: Number,
    isCurrent: Boolean,
  },
  data() {
    return {
      isShow: false,
      editor: null,
      editorContent: "<div style=\"text-align: center; padding-top: 20px; color: #8c939d\">\n" +
        "    <h2>暂无数据</h2>\n" +
        "  </div>",
      info: {
        doorId: 0,
        position: '',
        phone: '',
        email: '',
        information: ""
      },
      showInfo: {
        doorId: 0,
        position: '',
        phone: '',
        email: '',
        information: ""
      },
    }
  },
  created() {
  },
  mounted() {
    this.getDoorInfo();
  },
  methods: {
    getDoorInfo() {
      axios.post('/api/door/info', qs.stringify({
        authorId: this.authorId
      })).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.info = res.data.data;
          this.showInfo = res.data.data;
          if (this.info.information !== null) {
            this.editorContent = this.info.information;
            this.createEditor();
          } else
            this.createEditor();
        }
      })
    },
    createEditor() {
      this.editor = new E(this.$refs.editorElem);

      this.editor.config.onchange = html => {
        this.editorContent = html;
        // console.log(this.editorContent);
      };
      this.editor.config.menus = [];
      if (this.isCurrent) {
        this.editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'foreColor', // 文字颜色
          'link', // 插入链接
          'list', // 列表
          'image', // 插入图片
          'code', // 插入代码
          'undo', // 撤销
          'redo' // 重复
        ];
      }
      this.editor.create();
      // this.$refs.editorElem.innerHTML = this.editorContent;
      this.editor.txt.html(this.editorContent);
      this.editor.disable();
    },
    update() {
      this.isShow = true;
      // this.createEditor();
      this.editor.enable();
    },
    cancel() {
      console.log(this.showInfo);
      console.log(this.info);
      this.showInfo = this.info;
      this.isShow = false;
      this.editor.disable();
    },
    updateInfo() {
      this.info = this.showInfo;
      this.info.information = this.editorContent;
      axios.post('/api/door/update', qs.stringify(this.info)).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.$message.success('修改成功！');
          this.isShow = false;
          this.editor.disable();
        }
        else
          this.$message.error('提交失败，请再次尝试！')
      }).catch(err => {
        console.log(err);
        this.$message.error('提交失败，请再次尝试！')
      })
    }
  }
}
</script>

<style>
.w-e-toolbar {
  z-index: 2!important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
  height: 140px !important;
}
.infoDiv {
  padding: 10px;
}
.el-form-item {
  margin: 5px;
}
</style>